<template>
    <div class="managePage flex flex_column">
      
        <div class="section">
            <div class="flex_between align_center">
                <div class="sectionName">{{ detail.name }}</div>
                <div class="btn" @click="getParentList" v-if="parentId">同步主账号知识库</div>
            </div>
            <div class="describetion">{{ detail.describe }}</div>
        </div>

        <div class="sectionVue flex_1" style="margin-top: 10px;">
            <div class="tabVue flex_between align_center">
                <div class="flex">
                    <div class="tab" :class="{active: current===1}" @click="change(1)">文本</div>
                    <div class="tab" :class="{active: current===2}" @click="change(2)">多媒体</div>
                    <div class="tab" :class="{active: current===3}" @click="change(3)">链接</div>
                </div>
                <div class="flex" v-if="current===1">
                    <span @click="toFileList()">管理已上传文件</span>
                    <span @click="download('https://ant-quanshi.oss-cn-hangzhou.aliyuncs.com/%E7%A4%BA%E4%BE%8B%E6%A8%A1%E6%9D%BF.docx')">下载示范模板</span>
                </div>
            </div>

            <!-- 文本 -->
            <div class="liVue flex_between" v-if="current===1">
                <div class="li flex_center align_center relative" 
                :class="{active: isCanUpload}" @dragover.prevent="isCanUpload = true"  @drop.prevent="handleDrop" @dragleave="isCanUpload = false">
                    <span class="el-icon-loading" v-if="loading" style="font-size: 18px;"></span>
                    <span v-else>将docx文件拖拽到或点击此处上传文档到知识库</span>
                    <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".docx" @change="fileChange($event)"/>
                </div>
                <div class="li flex_center align_center" @click="dialogTableVisible=true" style="margin: 0 15px">
                    <span>直接添加文本内容到知识库</span>
                </div>
                <div class="li flex flex_1" style="background: #fff;">
                    <el-input v-model="key" placeholder="搜索关键词" @clear="textClear" clearable></el-input>
                    <div class="search" @click="searchFun">搜索</div>
                </div>
            </div>    
  
            <!-- 多媒体 -->
            <div class="liVue flex_between" v-if="current===2">
                <div class="li flex_center align_center" style="width: 100%;" @click="dialogTableVisible30=true">
                    <span>上传图片、视频、pdf文件到知识库</span>
                </div> 
            </div>

            <!-- 链接 -->
            <div class="liVue flex_between" v-if="current===3">
                <div class="li flex_center align_center" style="width: 100%;" @click="dialogTableVisible50=true">
                    <span>添加链接到知识库</span>
                </div> 
            </div>

            <div class="manageContent">
                <!-- 文本知识库列表 -->
                <template v-if="current===1">
                    <el-table :data="list" height="100%" border width="100%" class="center-table">
                        <el-table-column prop="question" label="问题">
                            <template slot-scope="scope">
                                <span v-html="searchLight(scope.row.question)"></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="answer" label="答案">
                            <template slot-scope="scope">
                                <span v-html="searchLight(scope.row.answer)"></span>
                            </template>
                        </el-table-column>
                        <!-- 操作 编辑 删除 -->
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <div class="flex_center">
                                    <el-button size="mini" type="edit" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="delete" @click="handleDelete(scope.row.id)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <!-- 多媒体知识库列表 -->
                <template v-if="current===2">
                    <el-table :data="list" height="100%" border width="100%" class="center-table">
                        <el-table-column prop="url" label="多媒体类型"  width="150">
                            <template slot-scope="scope">
                                <span v-if="scope.row.url.endsWith('.png') || scope.row.url.endsWith('.jpg') || scope.row.url.endsWith('.jpeg')">图片</span>
                                <span v-if="scope.row.url.endsWith('.mp4')">视频</span>
                                <span v-if="scope.row.url.endsWith('.pdf')">PDF</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="answer" label="多媒体内容描述" :show-overflow-tooltip="true"></el-table-column>

                        <el-table-column prop="question" label="关联问题" :show-overflow-tooltip="true"></el-table-column>
                        
                        <!-- 操作 编辑 删除 -->
                        <el-table-column label="操作" width="260">
                            <template slot-scope="scope">
                                <div class="flex_center">
                                    <el-button size="mini" type="manage" @click="handleShow(scope.row.url)">下载</el-button>
                                    <el-button size="mini" type="edit" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="delete" @click="handleDelete(scope.row.id)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                
                <!-- 链接知识库列表 -->
                <template v-if="current===3">
                    <el-table :data="list" height="100%" border width="100%" class="center-table">
                        <el-table-column prop="url" label="链接地址" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="answer" label="链接类容描述" :show-overflow-tooltip="true"></el-table-column>
                        <el-table-column prop="question" label="关联问题" :show-overflow-tooltip="true"></el-table-column>
                        <!-- 操作 编辑 删除 -->
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <div class="flex_center">
                                    <el-button size="mini" type="edit" @click="handleEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="delete" @click="handleDelete(scope.row.id)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            
            <!-- 分页 -->
            <div class="paginationVue flex_center align_center">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>
        

        <!-- 同步主账号知识库 -->
        <el-dialog title="同步主账号知识库" :visible.sync="dialogTableVisible20" :show-close="true" :center="true" top="200px" :close-on-click-modal="false" @close="parentId=''">
            <div class="dialogVue">
                <div class="inner relative">
                    <div class="item" v-for="(item, index) in parentList" :key="index" :class="{selectActive: parentId===item.id}" @click="parentId = item.id">
                        <div class="name">{{ item.name }}</div>
                        <div class="describetion">描述：{{ item.describe }}</div>
                        <div class="time">上次更新：{{ item.updateTime }}</div>
                    </div>

                    <!-- 列表为空 -->
                    <div slot="empty" class="flex_column align_center absolute_auto" v-if="parentList.length===0">
                        <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                        <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                    </div>
                </div>
                <div class="btn margin20" @click="parentFun">立即同步</div>
            </div>
        </el-dialog>
        
        <!-- 添加文本内容到知识库 -->
        <el-dialog title="添加文本内容到知识库" :visible.sync="dialogTableVisible" :show-close="false" :center="true" top="100px" @close="textClose">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">问题(支持添加多个问题，用换行区分)</div>
                    <textarea placeholder="请输入问题" v-model="question"></textarea>
                </div>
                
                <div class="inpVue">
                    <div class="label">答案</div>
                    <textarea placeholder="请输入问题答案" v-model="answer" style="height: 200px;"></textarea>
                </div>

                <div class="flex_between margin30">
                    <div class="cancel" @click="textClose">取消</div>
                    <div class="create" @click="createTextFun">
                        <span class="el-icon-loading" v-if="loading"></span>
                        <span v-else>添加</span>
                    </div>
                </div>
            </div>
        </el-dialog>

         <!-- 编辑文本知识库 -->
         <el-dialog title="编辑文本知识库" :visible.sync="dialogTableVisible10" :show-close="false" :center="true" top="100px" @close="textClose">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">问题</div>
                    <textarea placeholder="支持添加多个问题，换行添加下一个问题" v-model="question"></textarea>
                </div>
                
                <div class="inpVue">
                    <div class="label">答案</div>
                    <textarea placeholder="请输入问题答案" v-model="answer" style="height: 200px;"></textarea>
                </div>

                <div class="flex_between margin30">
                    <div class="cancel" @click="textClose">取消</div>
                    <div class="create" @click="editTextFun">
                        <span class="el-icon-loading" v-if="loading"></span>
                        <span v-else>添加</span>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 上传多媒体到知识库 -->
        <el-dialog title="上传多媒体到知识库" :visible.sync="dialogTableVisible30" :show-close="false" :center="true" top="100px" @close="imgClose">
            <div class="dialogVue">
                <div class="li flex_center align_center relative" v-if="!imgFile"
                :class="{active: isCanUpload}" @dragover.prevent="isCanUpload = true"  @drop.prevent="handleImgDrop" @dragleave="isCanUpload = false">
                    <span class="el-icon-loading" v-if="loading" style="font-size: 18px;"></span>
                    <span v-else>将文件拖拽到或点击此处上传文档到知识库</span>
                    <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".png, .jpg, .jpeg, .mp4, .pdf" @change="imgChange($event)"/>
                </div>

                <div class="li flex_center align_center" v-else>
                    <el-tag type="info" @click="imgFile=null">{{imgFile.name}}</el-tag>
                </div>

                <div class="inpVue">
                    <div class="label">文件内容概述</div>
                    <textarea placeholder="请输入文件内容概述，帮助 AI 学习训练" v-model="describetion"></textarea>
                </div>
                
                <div class="inpVue">
                    <div class="label">关联问题</div>
                    <textarea placeholder="若关联多个问题，请换行隔开" v-model="question"></textarea>
                </div>

                <div class="flex_between margin30">
                    <div class="cancel" @click="imgClose">取消</div>
                    <div class="create" @click="createImgFun">
                        <span class="el-icon-loading" v-if="loading"></span>
                        <span v-else>上传</span>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 修改多媒体到知识库 -->
        <el-dialog title="修改多媒体知识库" :visible.sync="dialogTableVisible40" :show-close="false" :center="true" top="100px" @close="imgClose">
            <div class="dialogVue">
                <div class="uploadImg text_center" v-if="dialogTableVisible40 && imgFile && (imgFile.endsWith('.png') || imgFile.endsWith('.jpg') || imgFile.endsWith('.jpeg'))">
                    <img :src="imgFile" style="width: 80px; height: 80px;">
                </div>
                <div class="li flex_center align_center" v-if="dialogTableVisible40 && imgFile && imgFile.endsWith('.pdf')">
                    <el-tag type="info">PDF</el-tag>
                </div>
                <div class="li flex_center align_center" v-if="dialogTableVisible40 && imgFile && imgFile.endsWith('.mp4')">
                    <el-tag type="info">视频</el-tag>
                </div>
                <div class="li flex_center align_center relative margin20">
                    <span>点击此处修改文件，新文件不超过10MB</span>
                    <input ref="clearRef" class="fileBtn" type="file" id="fileupload" accept=".png, .jgp, .jpeg, .mp4, .pdf" @change="imgEditChange($event)"/>
                </div>
                <div class="inpVue">
                    <div class="label">文件内容概述</div>
                    <textarea placeholder="请输入图片内容概述，帮助AI学习训练" v-model="describetion"></textarea>
                </div>
                <div class="inpVue">
                    <div class="label">关联问题</div>
                    <textarea placeholder="若关联多个问题，请换行隔开" v-model="question"></textarea>
                </div>
                <div class="flex_between margin30">
                    <div class="cancel" @click="imgClose">取消</div>
                    <div class="create" @click="editImgFun">
                        <span class="el-icon-loading" v-if="loading"></span>
                        <span v-else>确定</span>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 添加链接到知识库 -->
        <el-dialog title="添加链接到知识库" :visible.sync="dialogTableVisible50" :show-close="false" :center="true" top="100px" @close="linkClose">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">链接</div>
                    <el-input v-model="link" placeholder="请输入您上传到知识库的链接地址"></el-input>
                </div>
                <div class="inpVue">
                    <div class="label">链接内容概述</div>
                    <textarea placeholder="请输入图片内容概述，帮助 AI 学习训练" v-model="describetion"></textarea>
                </div>
                <div class="inpVue">
                    <div class="label">关联问题</div>
                    <textarea placeholder="若关联多个问题，请换行隔开" v-model="question"></textarea>
                </div>
                <div class="flex_between margin30">
                    <div class="cancel" @click="linkClose">取消</div>
                    <div class="create" @click="createLinkFun()">
                        <span class="el-icon-loading" v-if="loading"></span>
                        <span v-else>确定</span>
                    </div>  
                </div>
            </div>
        </el-dialog>

        <!-- 编辑链接 -->
        <el-dialog title="编辑知识库中的链接" :visible.sync="dialogTableVisible60" :show-close="false" :center="true" top="100px" @close="linkClose">
            <div class="dialogVue">
                <div class="inpVue">
                    <div class="label">链接</div>
                    <el-input v-model="link" placeholder="请输入您上传到知识库的链接地址"></el-input>
                </div>
                <div class="inpVue">
                    <div class="label">链接内容概述</div>
                    <textarea placeholder="请输入图片内容概述，帮助 AI 学习训练" v-model="describetion"></textarea>
                </div>
                <div class="inpVue">
                    <div class="label">关联问题</div>
                    <textarea placeholder="若关联多个问题，请换行隔开" v-model="question"></textarea>
                </div>
                <div class="flex_between margin30">
                    <div class="cancel" @click="linkClose">取消</div>
                    <div class="create" @click="editLinkFun()">
                        <span class="el-icon-loading" v-if="loading"></span>
                        <span v-else>确定</span>
                    </div>
                </div>
            </div>
        </el-dialog>

        <!-- 管理已上传文件 -->
        <el-dialog title="管理已上传文件" :visible.sync="dialogTableVisible70" :show-close="true" :center="true" top="100px">
            <div class="dialogVue">
                <div class="box">
                    <div class="boxInner flex_between flex_wrap">
                        <div class="boxLi flex-between align_center" v-for="(item,index) in datasetDocumentList" :key="index">
                            <span class="fileName">{{item.docName}}</span>
                            <div class="flex align_center">
                                <span @click="deleteDocument(item.id)">删除</span>
                                <div class="line"></div>
                                <span @click="download(item.url)">下载</span>
                            </div>
                        </div>
                    </div> 
                    <div style="height: 100%" class="flex_column align_center flex_center" v-if="datasetDocumentList.length===0">
                        <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                        <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                    </div>
                </div>
            </div>
        </el-dialog>

        <previewVue :dialogTableVisible80="dialogTableVisible80" :previewUrl="previewUrl" @beforeClose="dialogTableVisible80=false"></previewVue>

    </div>
</template>

<script>
import manageVue from './components/manage.vue'
import { toast } from '@/common/tools'
import { post } from "@/common/ossload";
import { url } from "@/common/verification"
import previewVue from '@/components/preview.vue';
export default {
    components: {
        manageVue,
        previewVue,
    },
    data(){
        return {
            current: 1,
            dialogTableVisible: false,
            dialogTableVisible10: false,
            dialogTableVisible20: false,
            dialogTableVisible30: false,
            dialogTableVisible40: false,
            dialogTableVisible50: false,
            dialogTableVisible60: false,
            dialogTableVisible70: false,
            dialogTableVisible80: false,
            dialogTableVisible90: false,
            repositityName: "",
            repositoryDescription: "",
            detail: {
                id: 0
            },
            list: [],
            isEmpty: false,
            total: 0,
            pageNum: 1,
            pageSize: 15,
            question: "",
            answer: "",
            id: "",
            isCanUpload: false,
            imgFile: null,
            describetion: "",
            link: "",
            previewUrl: "",
            loading: false,
            parentList: [],
            parentId: "",
            datasetDocumentList: [],
            parentId: "",
            key: ""
        }
    },
    created(){
        this.getDetail()
        this.getDetailList()
        this.getInfo()
    },
    watch: {
        key(){
            if(!this.key) {
                this.pageNum = 1
                this.getDetailList()
            }
        }
    },
    methods: {
        change(index) {
            this.current = index
            this.list = []
            this.getDetailList()
        },

        getInfo(){
            this.$post("/front/child/userPackageInfo").then(res=>{
                console.log(res)
                this.parentId = res.data.obj.parentId
            })
        },

        //管理已上传文件
        toFileList(){
            this.dialogTableVisible70 = true
            this.$post("/front/dataset/datasetDocumentList", {
                datasetId: this.detail.id,
                pageNum: 1,
                pageSize: 100,
            }).then(res=>{
                console.log(res)
                this.datasetDocumentList = res.data.obj.list
            })
        },

        // 下载已上传文件
        download(url){
            window.open(url)
        },
        
        // 删除已上传文件
        deleteDocument(id){
            this.$post("/front/dataset/deleteDocument", {
                id: id
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "删除成功")
                    this.$post("/front/dataset/datasetDocumentList", {
                        datasetId: this.detail.id,
                        pageNum: 1,
                        pageSize: 100,
                    }).then(res=>{
                        console.log(res)
                        this.datasetDocumentList = res.data.obj.list
                    })
                }
            })
        },

        // 获取知识库详情
        getDetail(){
            this.$post("/front/dataset/datasetDetail", {
                id: this.$route.query.id
            }).then(res=>{
                this.detail = res.data.obj
            })
        },

        // 获取知识库内容
        getDetailList(){
            this.$post("/front/dataset/datasetContentList", {
                datasetId: this.$route.query.id,
                type: this.current,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                searchStr: this.key
            }).then(res=>{
                this.list = res.data.obj.list
                this.total = res.data.obj.total
            })
        },

        // 添加文本内容到知识库
        createTextFun(){
            if(!this.question) return toast(1, "请输入问题")
            if(!this.answer) return toast(1, "请输入答案") 
            if(this.loading) return
            this.loading = true
            this.$post("/front/dataset/addDatasetContent", {
                datasetId: this.detail.id,
                type: 1,
                question: this.question,
                answer: this.answer,
                url: ""
            }).then(res=>{
                if(res.data.code===0) {
                    this.loading = false
                    toast(0, "添加成功")
                    this.textClose()
                    this.getDetailList()
                }else{
                    toast(1, res.data.msg)
                }
            })
        },

        // 编辑
        handleEdit(item){
            if(this.current===1) {
                this.question = item.question
                this.id = item.id
                this.answer = item.answer
                this.dialogTableVisible10 = true
            }else if(this.current===2) {
                this.question = item.question
                this.describetion = item.answer
                this.id = item.id
                this.imgFile = item.url
                this.dialogTableVisible40 = true
            }else{
                this.question = item.question
                this.describetion = item.answer
                this.id = item.id
                this.link = item.url
                this.dialogTableVisible60 = true
            }
        },

        // 编辑提交
        editTextFun(){
            if(!this.question) return toast(1, "请输入问题")
            if(!this.answer) return toast(1, "请输入答案") 
            if(this.loading) return 
            this.loading = true
            this.$post("/front/dataset/updateDatasetContent", {
                id: this.id,
                question: this.question,
                answer: this.answer,
                url: ""
            }).then(res=>{
                this.loading = false
                if(res.data.code===0) {
                    toast(0, "编辑成功")
                    this.textClose()
                    this.getDetailList()
                }else{
                    toast(1, res.data.msg)
                }
            })
        },

         // 删除
         handleDelete(id){
            this.$alert(`确认删除该选项？`, '删除', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        this.$post("/front/dataset/deleteDatasetContent", {
                            ids: id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功")
                                this.getDetailList()
                            } 
                        })
                    }
                }
            });
        },

        handleDrop(event){
            if(this.loading) return
            const file = event.dataTransfer.files[0];
            if(!file.name.endsWith(".docx")) return toast(1, "只能上传.docx文件")
            if (file.size > 25 * 1024 * 1024) return toast(1, "上传的文件大小不超过25M")
            let formData = new FormData()
            formData.append("file", file)
            formData.append("id", this.detail.id)
            this.loading = true
            post("/front/dataset/uploadDoc", formData).then(result=>{
                this.loading = false
                this.$refs.clearRef.value = ''; // 清空file文件
                if(result.data.code===0) {
                    toast(0, "上传成功")  
                    this.getDetailList()
                }else{
                    toast(1, result.data.msg)
                }
            }) 
        },

        // 选择文件
        fileChange(event){
            if(this.loading) return
            let file = event.target.files[0];
            if (file.size > 5 * 1024 * 1204) return toast(1, "上传的文件大小不超过5M")
            let formData = new FormData()
            formData.append("file", file)
            formData.append("id", this.detail.id)
            this.loading = true
            post("/front/dataset/uploadDoc", formData).then(result=>{
                this.loading = false
                this.$refs.clearRef.value = ''; // 清空file文件
                if(result.data.code===0) {
                    toast(0, "上传成功")  
                    this.getDetailList()
                }else{
                    toast(1, result.data.msg)
                }
            })   
        },

        // 多媒体选择
        handleImgDrop(event){
            let file = event.dataTransfer.files[0];
            console.log(file)
            if(file.name.endsWith(".mp4") && file.size > 25 * 1024 * 1204) return toast(1, "上传的视频文件大小不超过25M")
            if((file.name.endsWith("png") || file.name.endsWith("jpg") || file.name.endsWith("jpeg") || file.name.endsWith("pdf")) && file.size > 100 * 1024 * 1024) return toast(1, "文件大小不超过100M")
            if (file.size > 10 * 1024 * 1204) return toast(1, "上传的文件大小不超过10M")
            this.imgFile = file
        },

        imgChange(event){
            const file = event.target.files[0];
            console.log(file)
            if(file.name.endsWith(".mp4") && file.size > 25 * 1024 * 1204) return toast(1, "上传的视频文件大小不超过25M")
            if((file.name.endsWith("png") || file.name.endsWith("jpg") || file.name.endsWith("jpeg") || file.name.endsWith("pdf")) && file.size > 100 * 1024 * 1024) return toast(1, "文件大小不超过100M")
            this.imgFile = file
        },

        imgEditChange(event){
            const file = event.target.files[0];
            if(file.name.endsWith(".mp4") && file.size > 25 * 1024 * 1204) return toast(1, "上传的视频文件大小不超过25M")
            if((file.name.endsWith("png") || file.name.endsWith("jpg") || file.name.endsWith("jpeg") || file.name.endsWith("pdf")) && file.size > 100 * 1024 * 1024) return toast(1, "文件大小不超过100M")
            let formData = new FormData()
            formData.append("file", file)
            this.loading = true
            post("/front/search/uploadFile", formData).then(res=>{
                this.imgFile = res.data.obj
                this.loading = false
            })
        },

        // 上传多媒体到知识库
        createImgFun(){
            if(!this.imgFile) toast(1, "请上传文件")
            if(!this.describetion) return toast(1, "请输入文件内容概述")
            if(!this.question) return toast(1, "请输入关联问题")
            let formData = new FormData()
            formData.append("file", this.imgFile)
            if(this.loading) return
            this.loading = true
            post("/front/search/uploadFile", formData).then(res=>{
                if(res.data.code===0) {
                    this.$post("/front/dataset/addDatasetContent", {
                        datasetId: this.detail.id,
                        type: 2,
                        question: this.question,
                        answer: this.describetion,
                        url: res.data.obj
                    }).then(result=>{
                        this.loading = false
                        if(result.data.code===0) {
                            toast(0, "上传成功")
                            this.imgClose()
                            this.getDetailList()
                        }else{
                            toast(0, res.data.msg)
                        }
                    })
                }
            })   
        },

        // 修改多媒体
        editImgFun(){
            if(!this.imgFile) toast(1, "请上传文件")
            if(!this.describetion) return toast(1, "请输入文件内容概述")
            if(!this.question) return toast(1, "请输入关联问题")
            if(this.loading) return
            this.loading = true
            this.$post("/front/dataset/updateDatasetContent", {
                id: this.id,
                type: 2,
                question: this.question,
                answer: this.describetion,
                url: this.imgFile
            }).then(result=>{
                this.loading = false
                if(result.data.code===0) {
                    toast(0, "修改成功")
                    this.imgClose()
                    this.getDetailList()
                }else{
                    toast(1, result.data.msg)
                }
            })    
        },

        // 添加链接
        createLinkFun(){
            if(!url(this.link)) return toast(1, "请输入正确的链接")
            if(!this.describetion) return toast(1, "请输入链接内容概述")
            if(!this.question) return toast(1, "请输入关联问题")
            if(this.loading) return
            this.loading = true
            this.$post("/front/dataset/addDatasetContent", {
                datasetId: this.detail.id,
                type: 3,
                question: this.question,
                answer: this.describetion,
                url: this.link
            }).then(result=>{
                this.loading = false
                if(result.data.code===0) {
                    toast(0, "添加成功")
                    this.linkClose()
                    this.getDetailList()
                }else{
                    toast(1, result.data.msg)
                }
            })
        },

        // 编辑链接
        editLinkFun(){
            if(!url(this.link)) return toast(1, "请输入正确的链接")
            if(!this.describetion) return toast(1, "请输入链接内容概述")
            if(!this.question) return toast(1, "请输入关联问题")
            if(this.loading) return
            this.loading = true
            this.$post("/front/dataset/updateDatasetContent", {
                id: this.id,
                type: 3,
                question: this.question,
                answer: this.describetion,
                url: this.link
            }).then(result=>{
                this.loading = false
                if(result.data.code===0) {
                    toast(0, "修改成功")
                    this.linkClose()
                    this.getDetailList()
                }else{
                    toast(1, result.data.msg)
                }
            })
        },

        textClose(){
            this.dialogTableVisible = false
            this.dialogTableVisible10 = false
            this.question = ""
            this.answer  = ""
            this.id = ""
            if(this.$refs.clearRef.value) this.$refs.clearRef.value = ''; // 清空file文件
        },

        imgClose(){
            this.dialogTableVisible30 = false
            this.dialogTableVisible40 = false
            this.describetion = ""
            this.question = ""
            this.id = ""
            this.imgFile = null
        },  
        
        linkClose(){
            this.dialogTableVisible50 = false
            this.dialogTableVisible60 = false
            this.link = ""
            this.describetion = ""
            this.id = ""
            this.question = ""
            this.answer  = ""
        },

        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getDetailList()
        },
        
        getFileUrl(file){
            var url;
            var agent = navigator.userAgent;
            if (agent.indexOf("MSIE") >= 1 || agent.indexOf("NET")!=-1) {
                url = window.URL.createObjectURL(file);
            } else if (agent.indexOf("Firefox") > 0) {
                url = window.URL.createObjectURL(file);
            } else if (agent.indexOf("Chrome") > 0) {
                url =window.webkitURL.createObjectURL(file);
            }
            return url;
        },

        handleShow(url){
            window.open(url)
        },

        // 获取主账号知识库列表
        getParentList(){
            this.dialogTableVisible20 = true
            this.$post("/front/dataset/parentDatasetList").then(res=>{
                if(res.data.code===0) {
                    this.parentList = res.data.obj
                }
            })
        },

        // 同步主账号知识库
        parentFun(){
            if(!this.parentId) return toast(1, "请选择一个主账号知识库")
            this.$post("/front/dataset/reuseDataset", {
                id: this.parentId
            }).then(res=>{
                if(res.data.code===0) {
                    toast(0, "同步成功")
                    this.getDetailList()
                    this.dialogTableVisible20 = false
                }else{
                    toast(1, res.data.msg)
                }
            })
        },

        textClear(){
            console.log("kkkk")
            this.pageNum = 1
            this.getDetailList()
        },

        searchFun(){
            if(!this.key) return toast(1, "请输入搜索关键词")
            this.pageNum = 1
            this.getDetailList()
        },

        searchLight(val){
            if(!this.key) return val
            const highlighted = val.replace(new RegExp(this.key, 'gi'), match => {
                return `<span style="color:#0147fd; font-weight: 600;">${match}</span>`;
            });
            return highlighted;
        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-tabs__item.is-active) {
    color: #0147fd;
    font-weight: 600;
}
:deep(.el-tabs__item:hover) {
        color: #0147fd !important;
}
:deep(.el-tabs__active-bar) {
     background-color: #0147fd;
}
:deep(.el-tabs__nav-wrap::after){
    height: 1px;
    background: #DCDFE6;
}
:deep(.el-dialog) {
    width: 500px;
    height: auto;
    border-radius: 10px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600; 
}
:deep(.el-dialog__header) {
    padding: 20px 0 0;
}
:deep(.el-dialog__body) {
    padding: 30px;
}
:deep(.el-input__inner) {
    height: 50px;
}
:deep(.el-tag--info) {
    margin-left: 10px;
}
:deep(.center-table td), 
:deep(.center-table th) {
  text-align: center !important;
  font-size: 13px !important;
}
:deep(.center-table th) {
  background: #f5f5f5 !important;
}
:deep(.el-button--delete) {
    background: #d81e06;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--edit) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--manage) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}

.dialogVue {
    width: 100%;
    .box {
        width: 100%;
        height: 500px;
        overflow: scroll;
        .boxInner {
            .boxLi {
                width: 210px;
                height: 62px;
                background: #f5f5f5;
                margin-bottom: 20px;
                padding: 0 15px;
                border-radius: 4px;
                .fileName {
                    color: #111;
                    font-size: 12px;
                    font-weight: 600;
                    flex: 1;
                }
                span {
                    color: #81868e;
                    font-size: 12px;
                    cursor: pointer;
                }
                span:hover {
                    color: #0147fd;
                }
                .line {
                    width: 1px;
                    height: 12px;
                    background: #AAA;
                    margin: 0 5px;
                }
            }
        }
    }
    .box::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    .inner {
        width: 100%;
        height: 400px;
        overflow: scroll;
        .item {
            width: 100%;
            padding: 10px;
            border: 1px solid #EEE;
            border-radius: 5px;
            margin-bottom: 10px;
            cursor: pointer;
            .name {
                color: #111;
                font-weight: 600;
            }
            .describetion {
                color: #333;
                padding-top: 10px;
            }
            .time {
                color: #333;
                padding-top: 10px;  
            }
        } 
        .selectActive {
            border: 1px solid #0147fd;

        }
    }
    .btn {
        width: 200px;
        height: 42px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        text-align: center;
        line-height: 42px;
        color: #fff;
        background: #0147fd;
    }
    .inner::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
    }
    .title {
        color: #111;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    .li {
         width: 100%;
        height: 50px;
        cursor: pointer;
         background: #f5f5f5;
        span {
            color: #AAA;
            font-size: 12px;
        }
        .fileBtn {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 98;
            border: none;
            outline: none;
        }
    }
    .active {
        border: #ececec 1px solid;
        background: #ececec;
    }
    .inpVue {
        width: 100%;
        margin-top: 20px;
        .label {
            color: #333;
            font-size: 14px;
            margin-bottom: 12px;
        }
        .input {
            height: 50px !important;
            color: #606266;
        }
        textarea {
            width: 100%;
            height: 120px;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            display: block;
            resize: none;
            padding: 10px;
            line-height: 1.4;
            color: #606266;
            font-size: inherit;
            font-family: PingFangSC, PingFang SC;
        }

        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
    .cancel, .create {
        width: 200px;
        height: 42px;
        border-radius: 18px;
        border: none;
        cursor: pointer;
        text-align: center;
        line-height: 42px;
    }
    .cancel {
        background: transparent;
        border: 1px solid #DCDFE6;
        color: #999;
        line-height: 40px;
    }
    .create {
        background: #0147fd;
        
        span {
            color: #fff;
        }
    }
}

.managePage {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    box-sizing: border-box;
    .section {
        width: 100%;
        padding: 20px;
        background: #fff;
        border-radius: 5px;
        min-height: 110px;
        .sectionName {
            color: #000;
            font-size: 16px;
            font-weight: 600;
        }
        .describetion {
            color: #81868e;
            line-height: 1.4;
            padding-top: 15px;
        }
        .label {
            color: #81868e;
            font-size: 14px;
            font-weight: 500;
        }
        .btn {
            width: 150px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: #0147fd;
            border-radius: 5px;
            color: #fff;
            cursor: pointer;
        }
    }

    .sectionVue {
        width: 100%;
        padding: 20px 20px 0;
        background: #fff;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .tabVue {
            width: 100%;
            height: 34px;
            .tab {
                width: 100px;
                height: 34px;
                border-radius: 4px;
                background: #f5f5f5;
                color: #333;
                line-height: 34px;
                text-align: center;
                margin-right: 15px;
                cursor: pointer;
            }
            .active {
                color: #fff;
                background: #0147fd;
            }
            span {
                color: #81868E;
                padding-left: 15px;
                cursor: pointer;
            }
            span:hover {
                color: #0147fd;
                text-decoration: underline;
            }
        }
    
        .liVue {
            width: 100%;
            background: #fff;
            height: 50px;
            margin-top: 12px;
            .li {
                width: 35%;
                height: 50px;
                cursor: pointer;
                background: #f5f5f5;
                span {
                    color: #AAA;
                    font-size: 12px;
                }
                .fileBtn {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                    cursor: pointer;
                    z-index: 98;
                    border: none;
                    outline: none;
                }
                .search {
                    width: 80px;
                    height: 50px;
                    background: #0147fd;
                    margin-left: 10px;
                    line-height: 50px;
                    text-align: center;
                    border-radius: 5px;
                    cursor: pointer;
                    color: #fff;
                }
            }
            .active {
                border: #ececec 1px solid;
                background: #ececec;
            }
        }

        .manageContent {
            width: 100%;
            background: #fff;
            border-radius: 5px;
            margin-top: 10px;
            flex: 1;
            .label {
                color: #000;
                font-size: 14px;
                font-weight: 500;
            }
            .tip {
                color: #81868E;
                cursor: pointer;
            }
        } 

        .paginationVue {
            width: 100%;
            height: 60px;
            background: #fff;
        }
    }         
}
</style>